import { StoreStatus } from "@/definition/enum/StoreEnum"
import { StoreVo } from "@/definition/vo/AuthVo"
import {API} from "@request/api";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { StaffRole } from "@/definition/enum/StaffEnum";
const Store = () => {
    const [store,setStore] = useState<StoreVo[]>([]);
    const getStoreItems = async () => {
        try{
            const items = await API.queryStoreItems();
            setStore(items);
        }catch{
            console.log("store error");
        }
    }
    useEffect(()=>{
        getStoreItems();
    },[])
    return (
        <>
            <div className="store">
                <div className="store-container">
                    <div className="container-content">
                        {StoreItem(store)}
                    </div>
                </div>
            </div>
        </>
    )
}
const StoreItem = (items: StoreVo[]) => {    
    const navigate = useNavigate();
    const onClick = (item:StoreVo) =>{
            navigate('/product/items')
    }
  return items.map((it:StoreVo,index:number) => {
        return <div className="content-item" onClick={() => {onClick(it)}} key={index} >
            <div className="item-logo">
                <img src="//v1.cdn.soiiy.cn/preview/00-7e6c/bWlsbGlzPTE2NzA3NTQxOTM4NTEmcmFuZG9tPTM1M2VhYzc0LTljYjMtNDUzYS1iMjZlLWQ4NTYzMzdlMjczMQ" />
            </div>
            <div className="item-box">
                <div className="item-nickname">
                    员工：{it.nickname}
                </div>
                <div className="item-role">
                    角色：{StaffRole[it.role as keyof typeof StaffRole]}
                </div>
                <div className="item-status">
                    状态：{StoreStatus[it.status as keyof typeof StoreStatus ]}
                </div>
            </div>
        </div>
    })
}

export default Store;